<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import {useStoriesStore} from "@/stores/index"
import {storeToRefs }from 'pinia'

//选择充值金额样式变换
const topUpOption = ref(0);
//获取书币
const booksCurrency = ref(0);
//商品价钱
const commodityPrice = ref(15);

//获取vip状态 pinia 相关操作
const {vip} = storeToRefs(useStoriesStore());

const optionChange = (i: number, price: number) => {
  topUpOption.value = i;
  commodityPrice.value = price;
};
//购买vip服务
const buyVip = () => {
  if (
    JSON.parse(localStorage.getItem("price") as any) >
    commodityPrice.value * 100
  ) {
    let price = JSON.parse(localStorage.getItem("price") as any);
    price = price - commodityPrice.value * 100;
    localStorage.setItem("price", price);
    showToast("开通成功");
    vip.value = true;
    getPrice();
  } else {
    showToast("您的书币不够");
  }
};
//获取书币
const getPrice = () => {
  booksCurrency.value = JSON.parse(localStorage.getItem("price") as any);
};

// vue3自带方法
const router = useRouter();

onMounted(() =>{
    getPrice();
})
</script>


<template>
  <div class="vip_view">
    <nav>
      <div @click="router.go(-1)" class="app"></div>
      <h1>开通VIP</h1>
      <div class="sourch">
        <p @click="router.push('/bookshelfv')">书架</p>
      </div>
    </nav>
    <!-- 账号信息 -->
    <div class="account_information">
      <p>账号: &nbsp;<span>134****2984</span></p>
      <p>
        余额: &nbsp;<span>{{ booksCurrency }}</span
        >书币
      </p>
    </div>
    <!-- 充值选择 -->
    <div class="top-up_option">
      <p>请选择购买时长</p>
      <ul>
        <li @click="optionChange(0, 15)" :class="{ con: topUpOption == 0 }">
          <p>1个月</p>
          <span>15元</span>
        </li>
        <li @click="optionChange(1, 30)" :class="{ con: topUpOption == 1 }">
          <p>2个月</p>
          <span>30元</span>
        </li>
        <li @click="optionChange(2, 45)" :class="{ con: topUpOption == 2 }">
          <p>3个月</p>
          <span>45元</span>
        </li>
        <li @click="optionChange(3, 150)" :class="{ con: topUpOption == 3 }">
          <p>10送2个月</p>
          <span>150元</span>
          <div class="recommend">选我</div>
        </li>
      </ul>
    </div>
    <!-- 充值按钮 -->
    <div class="prepaid_phone_button">
      <button v-if="booksCurrency >= 1500 ? false : true">
        余额不足，请至少充值1500书币
      </button>
      <button v-if="booksCurrency >= 1500 ? true : false" @click="buyVip">
        购买
      </button>
    </div>
    <!-- vip介绍 -->
    <div class="introduced">
      <h6></h6>
      <ul>
        <li>1. 非包月专区图书8折优惠，连章购买优惠低至6.5折；</li>
        <li>2. 购买成功后开始计算时间，购买时间可累加；</li>
        <li>3. 非包月专区图书8折优惠，连章购买优惠低至6.5折；</li>
        <li>4. VIP特权只支持使用书币购买；</li>
        <li>5. 最终解释权归天浪小说所有。</li>
      </ul>
    </div>

    <br /><br />

    <footer>
      <p>©2022天浪小说</p>
      <!-- <p>京ICP备 11009265号-5</p> -->
    </footer>
  </div>
</template>

<style lang="scss" scoped>
nav {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  border-bottom: 1px solid #cbcbcb;
  .app {
    width: 36px;
    height: 36px;
    background: url("/public/img/personalCenter/left.png") no-repeat 12px 0px;
    background-size: 18px 18px;
    margin-top: 13px;
    padding-left: 11px;
    padding-right: 44px;
  }
  h1 {
    font-size: 18px;
    color: #333333;
    padding-top: 12px;
    padding-bottom: 10px;
    font-weight: normal;
  }
  .sourch {
    display: flex;
    width: 60px;
    padding-right: 20px;
    justify-content: flex-end;
    align-items: center;
    p {
      font-size: 14px;
      color: #333;
    }
  }
}
.account_information {
  padding: 18px 20px;
  background-color: #fff;
  p {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
    span {
      font-size: 13px;
    }
  }
}
.top-up_option {
  & > p {
    padding: 0 20px;
    line-height: 48px;
    height: 48px;
    font-size: 14px;
    color: #888;
  }
  ul {
    display: flex;
    padding: 0 20px;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      position: relative;
      width: 45.8%;
      height: 47px;
      padding-top: 10px;
      padding-left: 8px;
      background-color: #fff;
      border-radius: 3px;
      margin-bottom: 15px;
      border: 1px solid #e3e3e3;
      &.con {
        height: 47px;
        border: 1px solid #6e6e6e;
      }
    }
    p {
      font-size: 14px;
      color: #333;
    }
    span {
      color: #aaa;
      font-size: 12px;
    }
    .recommend {
      padding: 10px 8px 9px 6px;
      border-radius: 0px 0px 0px 20px;
      line-height: 15px;
      text-align: center;
      text-indent: 0.75em;
      background-color: #6e6e6e;
      color: #fff;
      position: absolute;
      right: 1px;
      top: 0px;
      font-size: 12px;
    }
  }
}
.prepaid_phone_button {
  margin-top: 10px;
  text-align: center;
  button {
    width: 335px;
    height: 40px;
    background-color: #6e6e6e;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 3px;
  }
}
.introduced {
  margin-top: 40px;
  h6 {
    border-bottom: 1px solid #e3e3e3;
    margin: 0 20px;
    position: relative;
    &::before {
      display: block;
      content: "VIP特权介绍";
      font-size: 13px;
      font-weight: normal;
      color: #888;
      background: #f5f5f5;
      padding: 0px 10px;
      position: absolute;
      left: 50%;
      margin-left: -50px;
      top: -8px;
    }
  }
  ul {
    padding: 0 20px;
    margin-top: 20px;
    li {
      font-size: 13px;
      color: #aaa;
      line-height: 20px;
    }
  }
}
footer {
  p {
    text-align: center;
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
  }
}
</style>